<template>
    <div>

        <el-form :model="form" ref="form1">



            <el-row :gutter="24">
                <el-col :span="24">
                    <el-button size="default" @click="printPage" plain><el-icon>
                            <Printer />
                        </el-icon>打印</el-button>
                    <el-button size="default" @click="add" plain><el-icon>
                            <CopyDocument />
                        </el-icon>添加人才库</el-button>
                        
                    <!-- <el-button size="default" @click="up" plain><el-icon>
                            <EditPen />
                        </el-icon>编辑</el-button> -->
                    <hr>
                </el-col>

                <el-col :span="24">
                    <!-- 空白分隔区域 -->
                    <div style="height: 10px; border-top: 0px dashed #e4e7ed; margin: 6px 0;"></div>
                </el-col>
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                        <el-form-item label="具体招聘需求" label-position="top"
                            :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                            <div class="progress-bar">
                                <div class="progress"></div>
                            </div>
                        </el-form-item>

                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple">
                        <el-form-item label="简历编号" label-position="top">
                            <el-input v-model="form.candidateid" style="width: 260px;" disabled />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple">
                        <el-form-item label="所属需求编号" label-position="top">
                            <el-input v-model="form.resumeRequirements" placeholder="ZP00004" style="width: 260px;"
                                disabled />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple">
                        <el-form-item label="意向岗位" label-position="top">
                            <el-input v-model="form.intendedPosition" placeholder="ZP00004" style="width: 260px;"
                                disabled />
                        </el-form-item>
                    </div>
                </el-col>

            </el-row>
            <!--  -->
            <el-row :gutter="24">

                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                        <el-form-item label="个人信息" label-position="top"
                            :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                            <div class="progress-bar">
                                <div class="progress"></div>
                            </div>
                        </el-form-item>

                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="姓名" label-position="top">
                            <el-input v-model="form.candidatename" placeholder="结城明日奈" style="width: 260px;" disabled />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="性别" label-position="top">

                            <template v-if="form.gender === 0">
                                <a-tag color="rgb(102, 177, 255)"
                                    style="width: 260px; display: flex; justify-content: center; align-items: center;">男</a-tag>
                            </template>
                            <template v-if="form.gender === 1">
                                <a-tag color="#FB9EC8"
                                    style="width: 260px; display: flex; justify-content: center; align-items: center;">女</a-tag>
                            </template>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="名族" label-position="top">
                            <el-input v-model="form.ethnicGroup" placeholder="汉族" style="width: 260px;" disabled />
                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->

                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="籍贯" label-position="top">
                            <el-input v-model="form.origin" placeholder="北京市西城区" style="width: 260px;" disabled />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="户口性质" label-position="top">
                            <el-input v-model="form.householdRegistration" placeholder="城市" style="width: 260px;"
                                disabled />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="政治面貌" label-position="top">
                            <el-input v-model="form.politicalAppearance" placeholder="群众" style="width: 260px;"
                                disabled />
                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->

                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="手机号码" label-position="top">
                            <el-input v-model="form.cellPhone" placeholder="1008611" style="width: 260px;" disabled />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="邮箱" label-position="top">
                            <el-input v-model="form.mailbox" placeholder="13k~14k" style="width: 260px;" disabled />

                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="出生年月" label-position="top">
                            <el-input v-model="form.dateOfBirth" placeholder="2004年1月1日" style="width: 260px;"
                                disabled />

                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="年龄" label-position="top">
                            <el-input v-model="form.age" placeholder="21" style="width: 260px;" disabled />
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="学历" label-position="top">
                            <template v-if="form.degree === 0">
                                <el-input  placeholder="高中" style="width: 260px;" disabled />
                            </template>
                             <template v-if="form.degree === 1">
                                <el-input  placeholder="本科" style="width: 260px;" disabled />
                            </template>
                             <template v-if="form.degree === 2">
                                <el-input  placeholder="大专" style="width: 260px;" disabled />
                            </template>
                              <template v-if="form.degree === 3">
                                <el-input  placeholder="研究生" style="width: 260px;" disabled />
                            </template>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="学校" label-position="top">
                            <el-input v-model="form.school" placeholder="xxx科技大学" style="width: 260px;" disabled />

                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="专业" label-position="top">
                            <el-input v-model="form.specialized" placeholder="计算机" style="width: 260px;" disabled />

                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="毕业时间" label-position="top">
                            <el-input v-model="form.graduationTime" placeholder="2024年6月3日" style="width: 260px;"
                                disabled />

                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="婚育情况" label-position="top">
                            <el-input v-model="form.marriageAndChildbearing" placeholder="未婚" style="width: 260px;"
                                disabled />

                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                        <el-form-item label="工作及实习经历" label-position="top"
                            :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                            <div class="progress-bar">
                                <div class="progress"></div>
                            </div>
                        </el-form-item>

                    </div>
                </el-col>
                <!--  -->
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light">

                        <el-input v-model="form.lastWork" clearable style="width: 560px" type="textarea"
                            :autosize="{ minRows: 5, maxRows: 8 }" placeholder="xxxx公司" disabled />

                    </div>
                </el-col>
                <!--  -->
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                        <el-form-item label="简历HR初筛" label-position="top"
                            :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                            <div class="progress-bar">
                                <div class="progress"></div>
                            </div>
                        </el-form-item>

                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="招聘负责人" label-position="top">
                            <el-input v-model="form.screenpeople" placeholder="早濑优香" style="width: 260px;" disabled />

                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content ep-bg-purple-light"><el-form-item label="简历状态" label-position="top">
                            <el-input v-model="form.resumeStatus" placeholder="待处理" style="width: 260px;" disabled />

                        </el-form-item>
                    </div>
                </el-col>
                <!--  -->
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light"><el-descriptions title="" :column="2"
                            direction="horizontal">
                            <el-descriptions-item label="提交人："> <el-text class="mx-1"
                                    type="primary">早濑优香</el-text></el-descriptions-item>
                            <el-descriptions-item label="提交时间：">2025年7月4日16:00:45</el-descriptions-item>
                            <el-descriptions-item label="更新时间：" :span="2">2025年7月4日16:00:45</el-descriptions-item>
                        </el-descriptions>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import request from '@/api/request'

const ModifyDisplay = ref(false) //修改显示

const props = defineProps(['date'])
console.log(props.date);

//打印
const printPage = () => {
    window.print()
}
const form = ref({
    // 候选人编号
    candidateid: null,

    // 候选人姓名
    candidatename: '',

    // 性别（0：男，1：女）
    gender: null,

    // 出生日期
    dateOfBirth: null,

    // 年龄
    age: null,

    // 民族
    ethnicGroup: '',

    // 政治面貌
    politicalAppearance: '',

    // 籍贯
    origin: '',

    // 户口（城镇，农村）
    householdRegistration: '',

    // 手机
    cellPhone: '',

    // 学历（如高中）
    degree: null,

    // 专业
    specialized: '',

    // 毕业时间
    graduationTime: null,

    // 学校
    school: '',

    // 意向岗位
    intendedPosition: '',

    // 婚育情况
    marriageAndChildbearing: '',

    // 邮箱
    mailbox: '',

    // 简历状态（待面试，待入职，已入职）
    resumeStatus: '',

    // 评价
    appraise: '',

    // 筛选人
    screenpeople: '',

    // 筛选日期
    filterDate: null,

    // 上次工作
    lastWork: '',
    // 简历需求
    resumeRequirements: ''
})

const Details = () => {
    request({
        url: '/candidateresume/getById',
        methed: 'get',
        params: {
            candidateid: props.date
        }
    }).then(res => {
        form.value = res.data
        console.log(res);
    }).catch(error => {
        console.error('获取数据失败:', error)
    })
}
if (props) {
    Details();
}
const from = ref({
    talentresumeid:''
})
const add =()=>{
    from.value.talentresumeid = form.value.candidateid
    request({
        url: '/talentpool/insert',
        method: 'post',
        data: from.value
    
    }).then(res => {
        console.log(res);
        ElementPlus.success('添加成功！')
    }).catch(error => {
        console.error('获取数据失败:', error)
    })
}


</script>

<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}
</style>
